<template>
  <div>
    <ul>
      <li v-for="(item,index) in countryInfo" :key="index" id="countryli" :class={check:ischeck}  @click="oncheck($event)" :title="item.continentEn+'.'+item.countryEn" >
        {{item.country}}
      </li>
    </ul>
  </div>
</template>

<script>
// import Vue from 'vue';

export default {
  data(){
    return{
        countryInfo:[],
        //选择的国家
        choose_country: [],
        choose_en:[],
        ischeck:false
    }
  },
  methods: {
    oncheck(e){
      
      //把选择的国家加入数组中
      //判断为空则追加
      if(this.choose_country.length == 0){
        e.target.className="check"
        this.choose_country.push(e.target.innerHTML)
        //把英文洲和国家存到choose_en
        this.choose_en.push(e.target.title)
      } else {
        //不为空时检验是否存在索引
        let index=this.choose_country.indexOf(e.target.innerHTML);
        //不存在时Indexof返回-1，则追加
        if(index == -1){
          e.target.className="check"
          this.choose_country.push(e.target.innerHTML)
          this.choose_en.push(e.target.title)
        }else{
          //存在时切掉该索引位置的值
          e.target.className="imcheck"
          this.choose_country.splice(index,1)
          this.choose_en.splice(index,1)
        }
      }
      console.log(this.choose_en);

      //将choose_country这个选中国家数组传到城市页面
      this.$store.commit("rational/setcityin",this.choose_country)
      console.log(this.$store.state.rational.cgcity);
      this.$store.commit("rational/seten",this.choose_en)
    }
  },
  created() {
    //把数据接口里的数据存到countryInfo数组
      this.$eventBus.$on('num',val => {
        let url='http://www.51houniao.com/requirement/destination/countries/'+ val
        this.$http.get(url).then((ret) => {
          this.countryInfo = ret
          // console.log(JSON.parse(JSON.stringify(this.countryInfo)));
        })
      })     
  },
  mounted() {
    
    // this.$eventBus.$emit('pickcountry',this.choose_country)
    // this.$store.commit("rational/setcityin",this.choose_country)
    // console.log
  }
}
</script>

<style scoped>
.countrydiv{
  margin-bottom: 50px;
}
#countryli{
  float: left;
  width: 88px;
  height: 44px;
  border: 2px solid rgb(49, 52, 59);
  margin: 5px 14px;
  text-align: center;
  border-radius: 12%;
  font-size: 14px;
  line-height: 44px;
  font-weight: bold;
  overflow: hidden;
}

.check{
  background-color: rgba(114, 120, 124, 0.671);
  color: white;
}
.imcheck{
  background-color: #fff;
  color: #000;
}
</style>